<template>
	<view class="system-message">
		<view class="system-message-content">
			<message-card :cardList="cardList"></message-card>
			<!-- <image src="" mode=""></image> -->
		</view>
	</view>
	
</template>

<script setup>
	import { reactive } from 'vue'
	import MessageCard from '../common/MessageCard/MessageCard.vue'
	
	const cardList = reactive([
		{
			msgHeaderImg:{
				imgsSrc:"../../../../../static/images/bell.png",
				imgWidth:"",
				imgHeight:""
			},
			msgTitle:"通知消息",
			msgNotReadNum:0,
			msgMainContent:"快来解锁你的学生专属特权",
			msgNotReadTime:"",
			bgcColor:"#fde70d"
		},
		{
			msgHeaderImg:{
				imgsSrc:"../../../../../static/images/like.png",
				imgWidth:"",
				imgHeight:""
			},
			msgTitle:"互动消息",
			msgNotReadNum:0,
			msgMainContent:"还没有新互动消息",
			msgNotReadTime:"",
			bgcColor:"#fe4e23"
		},
		{
			msgHeaderImg:{
				imgsSrc:"../../../../../static/images/service.png",
				imgWidth:"",
				imgHeight:""
			},
			msgTitle:"客服消息",
			msgNotReadNum:0,
			msgMainContent:"还没有新互动消息",
			msgNotReadTime:"",
			bgcColor:"#0bc996"
		}
	])
</script>

<style lang="scss" scoped>
	.system-message{
		background-color: #fff;
		border-radius: 0 0 25rpx 25rpx;
		overflow: hidden;
		width: 100%;
		display:flex;
		justify-content:center;
		align-items: center;
		>.system-message-content{
			display: flex;
			justify-content: center;
			flex-direction: column;
			width: 90%;
		}
	}
</style>